<template>
	<view v-show="moreShow">
		<view v-if="butType==0" @click="goTop" :style="'bottom:' + offsetBottom" class="go-top"></view>
		<view v-else-if="butType == 1" class="strategy-top" @click="goTop"  :style="'bottom:' + offsetBottom"><text class="iconfont">&#xe669;</text></view>
	</view>
</template>

<script>
	/**
	 * goTop 返回顶部
	 * @property {Boolean} moreShow = [false|true] 控制组件显示或隐藏
	 * @property {Number} scrollTop 滚动到页面的目标位置
	 * @property {Number} duration 滚动动画的时长
	 * @property {Number} butType 按钮样式（默认是0 ,1是攻略详情样式）
	 */
	export default {
		props:{
			moreShow:{
				type: Boolean,
				default: false
			},
			scrollTop:{
				type: Number,
				default: 0
			},
			offsetBottom: {
				type: String,
				default: '50rpx'
			},
			duration:{
				type: Number,
				default: 100
			},
			butType:{
				type: Number,
				default: 0
			}
		},
		
		data() {
			return {
				
			};
		},
		
		methods: {
			goTop(){
				uni.pageScrollTo({
					scrollTop: this.scrollTop,
					duration: this.duration
				});
			}
			
		}
	}
</script>

<style>
	.go-top{
		position: fixed;
		right: 25rpx;
		z-index: 98;
		width: 90rpx;
		height: 90rpx;
		background: url("https://static.member.stourweb.cn/uniapp/static/images/go-top-icon.png") no-repeat;
		background-size: contain;
	}
	.strategy-top{
		position: fixed;
		right: 25rpx;
		z-index: 98;
		width: 102rpx;
		height: 102rpx;
		border-radius: 102rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0,0,0,0.1);
	}
	.iconfont{
		color: #5BE181;
		line-height: 102rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		font-size: 50rpx !important;
	}
</style>
